<template>
  <div class="page-container">
    <div class="page-header">
      <div class="page-tile">
        {{ $t("route.horizionIndex") }}
        <i v-if="false" class="iconfont iconzhongyiicon_gaojing"></i>
      </div>
      <div class="left-wrapper"></div>
      <div class="right-wrapper"></div>
    </div>
    <el-scrollbar class="page-content">
      <div class="content-wrapper">
        <el-card>
          <el-tabs v-model="activeName" @tab-click="tabshandleClick">
            <el-tab-pane
              :label="$t('order.orderInstance.desktopInstanceTask')"
              name="first"
            >
              <basic-table
                tableName="first"
                v-loading="loading"
                style="padding-top: 15px"
                ref="horizionOrder-first"
                :immediate="activeName === 'first'"
                :pageMethod="getOrderPageList"
              >
                <template #table-options="tableSlotData">
                  <div class="table-left-options">
                    <el-button
                      type="primary"
                      class="icon-button setting-button"
                      style="width: auto"
                      v-if="false"
                      @click="
                        batchDelete(
                          tableSlotData.table.selectRows,
                          'desktopInstance'
                        )
                      "
                      :disabled="
                        loading || tableSlotData.table.selectRows.length <= 0
                      "
                    >
                      <i
                        class="iconfont iconzhongyiicon_shanchu"
                        style="font-size: 12px; margin-right: 5px"
                      ></i>
                      <span style="font-size: 12px">{{
                        $t("common.delete")
                      }}</span>
                    </el-button>
                    <!--批量重试-->
                    <el-button
                      class="icon-button setting-button"
                      style="width: auto"
                      @click="
                        operationOrder(
                          tableSlotData.table.selectRows,
                          'retry',
                          'desktopInstance'
                        )
                      "
                      :disabled="
                        loading || tableSlotData.table.selectRows.length <= 0
                      "
                    >
                      <i
                        class="iconfont iconzhongyiicon_zhongzhi"
                        style="font-size: 12px; margin-right: 5px"
                      ></i>
                      <span style="font-size: 12px">{{
                        $t("order.retry")
                      }}</span>
                    </el-button>
                    <!--批量确认失败-->
                    <el-button
                      class="icon-button setting-button"
                      style="width: auto"
                      @click="
                        operationOrder(
                          tableSlotData.table.selectRows,
                          'confirmFail',
                          'desktopInstance'
                        )
                      "
                      :disabled="
                        loading || tableSlotData.table.selectRows.length <= 0
                      "
                    >
                      <i
                        class="iconfont iconzhongyiicon_yunxu"
                        style="font-size: 12px; margin-right: 5px"
                      ></i>
                      <span style="font-size: 12px">{{
                        $t("order.confirmFail")
                      }}</span>
                    </el-button>
                  </div>
                  <div class="table-right-options">
                    <el-select
                      default-first-option
                      v-model="isOperationStatus"
                      @change="tableSlotData.table.refresh(true)"
                      :disabled="tableSlotData.table.loading"
                      style="margin-right: 10px"
                    >
                      <el-option
                        v-for="status in operationStatus"
                        :key="status.value"
                        :label="status.label"
                        :value="status.value"
                      >
                      </el-option>
                    </el-select>
                    <el-input
                      v-model="searchValue"
                      :placeholder="$t('order.orderInstance.searchInstance')"
                      @keyup.enter.native="tableSearchChange(tableSlotData)"
                      style="width: 200px"
                    >
                    </el-input>
                    <el-button
                      @click="tableSearchChange(tableSlotData)"
                      type="primary"
                      style="margin-left: 10px"
                      >{{ $t("common.search") }}</el-button
                    >
                  </div>
                </template>
                <template #table-column="tableSlotData">
                  <el-table-column
                    type="selection"
                    width="40"
                    align="center"
                  ></el-table-column>
                  <!-- 订单号 -->
                  <el-table-column
                    prop="orderId"
                    :label="$t('order.orderNumber')"
                  >
                  </el-table-column>
                  <!-- 资源实例ID -->
                  <el-table-column
                    prop="instanceId"
                    :label="$t('order.orderInstance.resourceInstanceID')"
                  >
                  </el-table-column>
                  <!-- 租户 -->
                  <el-table-column
                    :label="$t('common.tenant')"
                    prop="cloudTenantName"
                  >
                  </el-table-column>
                  <!-- 资源池名称 -->
                  <el-table-column
                    prop="resourcePoolCode"
                    :label="$t('resource.resourcePoolName')"
                  >
                    <template #default="props">
                      {{ initPoolName(props.row) }}
                    </template>
                  </el-table-column>
                  <!-- 可用区 -->
                  <el-table-column
                    prop="availableZoneCode"
                    :label="$t('order.orderInstance.az')"
                  >
                  </el-table-column>
                  <!-- 工作区名称 -->
                  <el-table-column
                    prop="workareaUUID"
                    :label="$t('order.orderInstance.workspaceName')"
                  >
                    <template #default="props">
                      <span>{{ props.row.workareaName }}</span>
                    </template>
                  </el-table-column>
                  <!-- 桌面名称 -->
                  <el-table-column
                    prop="desktopName"
                    :label="$t('order.orderInstance.desktopName')"
                  >
                  </el-table-column>
                  <!-- 订单操作 -->
                  <el-table-column
                    :label="$t('order.orderInstance.orderAction')"
                    prop="requestType"
                    :formatter="
                      (row, column) => {
                        if (row.requestType) {
                          return $t(
                            `order.orderRequestType.${row.requestType}`
                          );
                        }
                        return '';
                      }
                    "
                  >
                  </el-table-column>
                  <!-- 任务状态 -->
                  <el-table-column
                    prop="status"
                    :label="$t('order.orderInstance.taskState')"
                  >
                    <template #default="props">
                      <span v-if="props.row.status !== 'failed'">{{
                        $t(`order.orderInstanceStatus.${props.row.status}`)
                      }}</span>
                      <el-tooltip
                        v-else
                        class="item"
                        effect="dark"
                        popper-class="order-task-tooltip"
                        placement="right"
                      >
                        <div
                          v-if="
                            props.row.requestType ||
                            props.row.errStatus ||
                            props.row.errMessage
                          "
                          slot="content"
                          class="content"
                        >
                          <p v-if="props.row.requestType">
                            {{
                              $t("order.orderInstance.steps") +
                              $t(
                                `order.orderRequestType.${props.row.requestType}`
                              )
                            }}
                          </p>
                          <p v-if="props.row.errStatus">
                            {{
                              $t("order.orderInstance.errCode") +
                              props.row.errStatus
                            }}
                          </p>
                          <p v-if="props.row.errMessage">
                            {{
                              $t("order.orderInstance.errText") +
                              props.row.errMessage
                            }}
                          </p>
                        </div>
                        <span style="color: #337dff; cursor: pointer">{{
                          $t(`order.orderInstanceStatus.${props.row.status}`)
                        }}</span>
                      </el-tooltip>
                    </template>
                  </el-table-column>
                  <!-- 创建时间 -->
                  <el-table-column
                    prop="createdAt"
                    :label="$t('policy.CreationTime')"
                    width="150"
                  >
                    <template #default="props">
                      <span>{{
                        parseTime(new Date(props.row.createdAt))
                      }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column :label="$t('common.action')" width="150">
                    <!-- 操作 -->
                    <template #default="props">
                      <!-- 删除 -->
                      <link-button
                        :content="$t('common.delete')"
                        :size="10"
                        :font-size="'12px'"
                        v-if="false"
                        style="margin-right: 15px"
                        @click="deleteRow(props.row, 'desktopInstance')"
                      />
                      <!-- 重试实例操作 -->
                      <link-button
                        :content="$t('order.orderInstance.retryInstance')"
                        :size="10"
                        :disabled="
                          props.row.status !== 'failed' &&
                          props.row.status !== 'timeout'
                        "
                        :font-size="'12px'"
                        style="margin-right: 15px"
                        @click.native="
                          operationOrder(props.row, 'retry', 'desktopInstance')
                        "
                      />
                      <el-dropdown>
                        <el-button type="text" class="el-dropdown-link">
                          {{ $t("common.More")
                          }}<i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                          <!-- 确认失败 -->
                          <el-dropdown-item
                            :disabled="getConfirmFailedStatus(props.row)"
                            @click.native="
                              operationOrder(
                                props.row,
                                'confirmFail',
                                'desktopInstance'
                              )
                            "
                            >{{
                              $t("order.orderInstance.confirmInstance")
                            }}</el-dropdown-item
                          >
                          <!-- 查看消息记录 -->
                          <el-dropdown-item
                            @click.native="
                              $router.push({
                                name: 'HorizionOrderMessage',
                                query: {
                                  order_id: props.row.instanceId,
                                  index_table_page:
                                    tableSlotData.table.currentPage,
                                  requestUUID: props.row.requestUUID,
                                },
                              })
                            "
                            >{{
                              $t("order.viewMessageHistory")
                            }}</el-dropdown-item
                          >
                          <!-- 修改实例状态 -->
                          <el-dropdown-item
                            @click.native="
                              changeOrderStatus(props.row, 'desktopInstance')
                            "
                            :disabled="props.row.status === 'successful'"
                          >
                            {{ $t("order.orderInstance.editInstance") }}
                          </el-dropdown-item>
                          <!-- 变更桌面 -->
                          <el-dropdown-item
                            :disabled="
                              props.row.status !== 'successful' ||
                              props.row.requestType !== 'createDesktops'
                            "
                            @click.native="
                              changeDesktop(props.row, 'desktopInstance')
                            "
                          >
                            {{ $t("order.orderInstance.changeDesktop") }}
                          </el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                    </template>
                  </el-table-column>
                </template>
                <template #others-elements="tableSlotData">
                  <delete-order
                    @success="tableSlotData.table.refresh"
                    ref="deleteFormDialog-first"
                  />
                  <operation-order
                    @success="tableSlotData.table.refresh"
                    @batchConfirmFailed="BatchConfirm"
                    ref="retryDialog-first"
                  />
                  <edit-band-width
                    @success="tableSlotData.table.refresh"
                    ref="editBandwidth-first"
                  />
                  <change-order-status
                    ref="ChangeOrderStatus-first"
                    @success="tableSlotData.table.refresh"
                  ></change-order-status>
                  <change-desktop
                    ref="ChangeDesktop-first"
                    @success="tableSlotData.table.refresh"
                  >
                  </change-desktop>
                  <!--确认失败出错订单实例-->
                  <order-error-message
                    ref="orderErrorMessage-first"
                    @success="tableSlotData.table.refresh"
                  >
                  </order-error-message>
                </template>
              </basic-table>
            </el-tab-pane>
            <el-tab-pane
              :label="$t('order.orderInstance.shareInstance')"
              name="second"
            >
              <basic-table
                tableName="second"
                v-loading="loading"
                style="padding-top: 15px"
                ref="horizionOrder-second"
                :immediate="activeName === 'second'"
                :pageMethod="getbandwidthPageList"
              >
                <template #table-options="tableSlotData">
                  <div class="table-left-options">
                    <el-button
                      v-if="false"
                      type="primary"
                      class="icon-button setting-button"
                      style="width: auto"
                      @click="
                        batchDelete(
                          tableSlotData.table.selectRows,
                          'bandwidthInstance'
                        )
                      "
                      :disabled="
                        loading || tableSlotData.table.selectRows.length <= 0
                      "
                    >
                      <i
                        class="iconfont iconzhongyiicon_shanchu"
                        style="font-size: 12px; margin-right: 5px"
                      ></i>
                      <span style="font-size: 12px">{{
                        $t("common.delete")
                      }}</span>
                    </el-button>
                    <el-button
                      class="icon-button setting-button"
                      style="width: auto"
                      @click="
                        operationOrder(
                          tableSlotData.table.selectRows,
                          'retry',
                          'bandwidthInstance'
                        )
                      "
                      :disabled="
                        loading || tableSlotData.table.selectRows.length <= 0
                      "
                    >
                      <i
                        class="iconfont iconzhongyiicon_zhongzhi"
                        style="font-size: 12px; margin-right: 5px"
                      ></i>
                      <span style="font-size: 12px">{{
                        $t("order.retry")
                      }}</span>
                    </el-button>
                    <!--批量确认失败-->
                    <el-button
                      class="icon-button setting-button"
                      style="width: auto"
                      @click="
                        operationOrder(
                          tableSlotData.table.selectRows,
                          'confirmFail',
                          'bandwidthInstance'
                        )
                      "
                      :disabled="
                        loading || tableSlotData.table.selectRows.length <= 0
                      "
                    >
                      <i
                        class="iconfont iconzhongyiicon_yunxu"
                        style="font-size: 12px; margin-right: 5px"
                      ></i>
                      <span style="font-size: 12px">{{
                        $t("order.confirmFail")
                      }}</span>
                    </el-button>
                  </div>
                  <div class="table-right-options">
                    <el-select
                      default-first-option
                      v-model="isOperationStatus"
                      @change="tableSlotData.table.refresh(true)"
                      :disabled="tableSlotData.table.loading"
                      style="margin-right: 10px"
                    >
                      <el-option
                        v-for="status in operationStatus"
                        :key="status.value"
                        :label="status.label"
                        :value="status.value"
                      >
                      </el-option>
                    </el-select>
                    <el-input
                      v-model="searchValue"
                      :placeholder="$t('order.orderInstance.searchInstance01')"
                      @keyup.enter.native="tableSearchChange(tableSlotData)"
                      style="width: 200px"
                    >
                    </el-input>
                    <el-button
                      @click="tableSearchChange(tableSlotData)"
                      type="primary"
                      style="margin-left: 10px"
                      >{{ $t("common.search") }}</el-button
                    >
                  </div>
                </template>
                <template #table-column="tableSlotData">
                  <el-table-column
                    type="selection"
                    width="40"
                    align="center"
                  ></el-table-column>
                  <!-- 订单号 -->
                  <el-table-column
                    prop="orderId"
                    :label="$t('order.orderNumber')"
                  >
                  </el-table-column>
                  <!-- 资源实例ID -->
                  <el-table-column
                    prop="instanceId"
                    :label="$t('order.orderInstance.resourceInstanceID')"
                  >
                  </el-table-column>
                  <!-- 租户 -->
                  <el-table-column
                    :label="$t('common.tenant')"
                    prop="cloudTenantName"
                  >
                  </el-table-column>
                  <!-- 资源池名称 -->
                  <el-table-column
                    prop="resourcePoolCode"
                    :label="$t('resource.resourcePoolName')"
                  >
                    <template #default="props">
                      {{ initPoolName(props.row) }}
                    </template>
                  </el-table-column>
                  <!-- 可用区 -->
                  <el-table-column
                    prop="availableZoneCode"
                    :label="$t('order.orderInstance.az')"
                  >
                  </el-table-column>
                  <!-- 工作区名称 -->
                  <el-table-column
                    prop="workareaUUID"
                    :label="$t('order.orderInstance.workspaceName')"
                  >
                    <template #default="props">
                      <span>{{ props.row.workareaName }}</span>
                    </template>
                  </el-table-column>
                  <!-- 带宽大小 -->
                  <el-table-column
                    prop="bandwidth"
                    :label="$t('order.orderInstance.bindwidthSize')"
                  >
                    <template #default="props">
                      {{
                        props.row.requestType === "createBandwidth"
                          ? props.row.bandwidth
                            ? props.row.bandwidth + "M"
                            : "—"
                          : "—"
                      }}
                    </template>
                  </el-table-column>
                  <!-- 订单操作 -->
                  <el-table-column
                    :label="$t('order.orderInstance.orderAction')"
                    prop="requestType"
                    :formatter="
                      (row, column) => {
                        if (row.requestType) {
                          return $t(
                            `order.orderRequestType.${row.requestType}`
                          );
                        }
                        return '';
                      }
                    "
                  >
                  </el-table-column>
                  <!-- 任务状态 -->
                  <el-table-column
                    prop="status"
                    :label="$t('order.orderInstance.taskState')"
                  >
                    <template #default="props">
                      <span v-if="props.row.status !== 'failed'">{{
                        $t(`order.orderInstanceStatus.${props.row.status}`)
                      }}</span>
                      <el-tooltip
                        v-else
                        class="item"
                        effect="dark"
                        popper-class="order-task-tooltip"
                        placement="right"
                      >
                        <div slot="content" class="content">
                          <p v-if="props.row.requestType">
                            {{
                              $t("order.orderInstance.steps") +
                              $t(
                                `order.orderRequestType.${props.row.requestType}`
                              )
                            }}
                          </p>
                          <p v-if="props.row.errStatus">
                            {{
                              $t("order.orderInstance.errCode") +
                              props.row.errStatus
                            }}
                          </p>
                          <p v-if="props.row.errMessage">
                            {{
                              $t("order.orderInstance.errText") +
                              props.row.errMessage
                            }}
                          </p>
                        </div>
                        <span style="color: #337dff; cursor: pointer">{{
                          $t(`order.orderInstanceStatus.${props.row.status}`)
                        }}</span>
                      </el-tooltip>
                    </template>
                  </el-table-column>
                  <!-- 创建时间 -->
                  <el-table-column
                    prop="createdAt"
                    width="150"
                    :label="$t('policy.CreationTime')"
                  >
                    <template #default="props">
                      <span>{{
                        parseTime(new Date(props.row.createdAt))
                      }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column :label="$t('common.action')" width="150">
                    <!-- 操作 -->
                    <template #default="props">
                      <!-- 删除 -->
                      <link-button
                        :content="$t('common.delete')"
                        :size="10"
                        :font-size="'12px'"
                        style="margin-right: 15px"
                        v-if="false"
                        @click="deleteRow(props.row, 'bandwidthInstance')"
                      />
                      <!-- 重试实例操作 -->
                      <link-button
                        :content="$t('order.orderInstance.retryInstance')"
                        :size="10"
                        :disabled="
                          props.row.status !== 'failed' &&
                          props.row.status !== 'timeout'
                        "
                        :font-size="'12px'"
                        style="margin-right: 15px"
                        @click.native="
                          operationOrder(
                            props.row,
                            'retry',
                            'bandwidthInstance'
                          )
                        "
                      />
                      <el-dropdown>
                        <el-button type="text" class="el-dropdown-link">
                          {{ $t("common.More")
                          }}<i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                          <!-- 重试实例操作 -->
                          <el-dropdown-item
                            v-if="false"
                            :disabled="
                              props.row.status !== 'failed' &&
                              props.row.status !== 'timeout'
                            "
                            @click.native="
                              operationOrder(
                                props.row,
                                'retry',
                                'bandwidthInstance'
                              )
                            "
                            >{{
                              $t("order.orderInstance.retryInstance")
                            }}</el-dropdown-item
                          >
                          <!-- 确认失败 -->
                          <el-dropdown-item
                            :disabled="getConfirmFailedStatus(props.row)"
                            @click.native="
                              operationOrder(
                                props.row,
                                'confirmFail',
                                'bandwidthInstance'
                              )
                            "
                            >{{
                              $t("order.orderInstance.confirmInstance")
                            }}</el-dropdown-item
                          >
                          <!-- 查看消息记录 -->
                          <el-dropdown-item
                            @click.native="
                              $router.push({
                                name: 'HorizionOrderMessage',
                                query: {
                                  order_id: props.row.instanceId,
                                  index_table_page:
                                    tableSlotData.table.currentPage,
                                  requestUUID: props.row.requestUUID,
                                },
                              })
                            "
                            >{{
                              $t("order.viewMessageHistory")
                            }}</el-dropdown-item
                          >
                          <!-- 修改实例状态 -->
                          <el-dropdown-item
                            @click.native="
                              changeOrderStatus(props.row, 'desktopInstance')
                            "
                            :disabled="props.row.status === 'successful'"
                          >
                            {{ $t("order.orderInstance.editInstance") }}
                          </el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                    </template>
                  </el-table-column>
                </template>
                <template #others-elements="tableSlotData">
                  <delete-order
                    @success="tableSlotData.table.refresh"
                    ref="deleteFormDialog-second"
                  />
                  <operation-order
                    @success="tableSlotData.table.refresh"
                    @batchConfirmFailed="BatchConfirm"
                    ref="retryDialog-second"
                  />
                  <edit-band-width
                    @success="tableSlotData.table.refresh"
                    ref="editBandwidth-second"
                  />
                  <change-order-status
                    ref="ChangeOrderStatus-second"
                    @success="tableSlotData.table.refresh"
                  ></change-order-status>
                  <!--确认失败出错订单实例-->
                  <order-error-message
                    ref="orderErrorMessage-second"
                    @success="tableSlotData.table.refresh"
                  >
                  </order-error-message>
                </template>
              </basic-table>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </div>
    </el-scrollbar>
  </div>
</template>
<script lang="ts">
import Vue from "vue";
import LinkButton from "../../../../components/Basic/Button/LinkButton.vue";
import BasicTable from "../../../../components/Basic/Table/BasicTable.vue";
import DeleteOrder from "../components/deleteOrderFormdialog.vue";
import OperationOrder from "../components/operationOrderConfirmDialog.vue";
import EditBandWidth from "../components/editOrderBandwidthFormDialog.vue";
import { parseTime, loginTimeslotToString } from "../../../../utils";
import { AuthModule } from "../../../../store/modules/auth";
import { AppModule } from "../../../../store/modules/app";
import orinusApi from "../../../../api/orinusApi";
import { Prop } from "vue-property-decorator";
import ChangeOrderStatus from "../components/changeOrderStatus.vue";
import ChangeDesktop from "../components/changeDesktopFormDialog.vue";
import { forEach, parseInt } from "lodash";
import order from "../../../../router/modules/order";
import workspace from "../../../../router/modules/workspace";
import { isArray } from "../../../../utils/validate";
import OrderErrorMessage from "../components/orderErrorMessage.vue"
export default Vue.extend({
  components: {
    BasicTable,
    LinkButton,
    DeleteOrder,
    OperationOrder,
    EditBandWidth,
    ChangeOrderStatus,
    ChangeDesktop,
    OrderErrorMessage,
  },
  computed: {
    parseTime: () => parseTime,
    loginTimeslotToString: () => loginTimeslotToString,
  },
  data() {
    return {
      searchValue: "",
      loading: false,
      tenant_options: [],
      language: AppModule.language,
      authrole: AuthModule.authrole,
      failedMessage: "",
      cloudTenantList: [
        {
          id: "",
          name: "",
        },
      ],
      cloudTenantSearchName: "",
      tableSearch: false,
      poolData: [],
      workspaceData: [],
      isOperationStatus: "",
      operationStatus: [{
        value: "",
        label: this.$t('order.orderInstance.allStatus')
      },{
        value: 'init',
        label: this.$t('order.orderInstanceStatus.init')
      }, {
        value: 'pending',
        label: this.$t('order.orderInstanceStatus.pending')
      },{
        value: 'doing',
        label: this.$t('order.orderInstanceStatus.doing')
      },{
        value: 'successful',
        label: this.$t('order.orderInstanceStatus.successful')
      },{
        value: 'failed',
        label: this.$t('order.orderInstanceStatus.failed')
      },
      // {
      //   value: 'timeout',
      //   label: this.$t('order.orderInstanceStatus.timeout')
      // },
      {
        value: 'confirm failed',
        label: this.$t('order.orderInstanceStatus.confirm failed')
      }
      ],
      activeName: "first",
    };
  },
  created() {
    // 获取上次选中的tab页
    if (localStorage.getItem("horizonOrderActiveName")) {
      (this as any).activeName = localStorage.getItem("horizonOrderActiveName");
    }
  },
  mounted() {
    //获取资源池名称
    this.$pandaApi.apiGetResourcePool().then((res: any) => {
      for (let i in res) {
        let obj = {
          pool_code: res[i].pool_code,
          pool_name: res[i].name,
        };
        this.poolData.push(obj as never);
      }
    });
  },
  beforeDestroy() {},
  methods: {
    async getOrderPageList(params: any) {
      params.queryId = this.searchValue;
      if (this.tableSearch) {
        params.page = 1;
        this.tableSearch = false;
      }
      delete params.search;
      params.status = this.isOperationStatus;
      params.categoryCode = 2
      const orderListResult = await this.$orsApi.getOrders(params);
      const workarea_uuids: any = [];
      orderListResult.rows.forEach((order: any) => {
        workarea_uuids.push(order.workareaUUID);
      });
      const workareaNameMap = await this.$pandaApi.apiGetWorkSpaceName({
        workarea_uuids: workarea_uuids,
      });
      orderListResult.rows = orderListResult.rows.map((order: any) => {
        order.workareaName = workareaNameMap[order.workareaUUID];
        return order;
      });
      return orderListResult;
    },
    async getbandwidthPageList(params: any) {
      params.queryId = this.searchValue;
      if (this.tableSearch) {
        params.page = 1;
        this.tableSearch = false;
      }
      delete params.search;
      params.status = this.isOperationStatus;
      params.categoryCode = 2;
      const orderListResult = await this.$orsApi.getBandwidth(params);
      const workarea_uuids: any = [];
      orderListResult.rows.forEach((order: any) => {
        workarea_uuids.push(order.workareaUUID);
      });
      const workareaNameMap = await this.$pandaApi.apiGetWorkSpaceName({
        workarea_uuids: workarea_uuids,
      });
      orderListResult.rows = orderListResult.rows.map((order: any) => {
        order.workareaName = workareaNameMap[order.workareaUUID];
        return order;
      });

      return orderListResult;
    },
    initPoolName(row: any) {
      let poolName = "";
      for (let i = 0; i < this.poolData.length; i++) {
        if (row.resourcePoolCode == (this as any).poolData[i].pool_code) {
          poolName = (this as any).poolData[i].pool_name;
        }
      }
      if (poolName) {
        return poolName;
      }
      return row.resourcePoolCode;
    },
    // 页面刷新重置page
    tableSearchChange(table: any) {
      (this as any).tableSearch = true;
      table.table.refresh(true);
    },
    batchDelete(
      selectRows: Array<any>,
      orderType: "desktopInstance" | "bandwidthInstance"
    ) {
      (this as any).$refs[`deleteFormDialog-${this.activeName}`].init({
        title: (this as any).$t("order.orderInstance.deleteInstance"),
        tip: (this as any).$t("order.orderInstanceDialog.InstanceDeleteBatch"),
        orderList: selectRows,
        orderType: orderType,
      });
    },
    deleteRow(row: any, orderType: "desktopInstance" | "bandwidthInstance") {
      (this as any).$refs[`deleteFormDialog-${this.activeName}`].init({
        title: (this as any).$t("order.orderInstance.deleteInstance"),
        tip: (this as any).$t("order.orderInstanceDialog.InstanceDeleteOnly"),
        orderList: [row],
        orderType: orderType,
      });
    },

    // 确认失败 | 重试实例操作
    operationOrder(
      data: any,
      type: string,
      orderType: "desktopInstance" | "bandwidthInstance"
    ) {
      let obj: any = {};
      obj.data = data;
      obj.type = type;
      obj.orderType = orderType;
      obj.categoryCode = 2;
      if (!Array.isArray(data)) {
        if (
          type === "retry" &&
          (data.status === "failed" || data.status === "timeout")
        ) {
          (this.$refs[`retryDialog-${this.activeName}`] as any).init(obj);
        } else if (type === "confirmFail") {
          (this.$refs[`retryDialog-${this.activeName}`] as any).init(obj);
        } else {
          return;
        }
      } else {
        if(type === "confirmFail") {
          let confirmfailed = false;
          for(let key of obj.data) {
            if(this.getConfirmFailedStatus(key)) {
              confirmfailed = true;
            }
          }
          if (confirmfailed) {
            (this as any).$message({
              message: this.$t('order.retryError').toString(),
              type: "warning",
            });
          } else {
            (this.$refs[`retryDialog-${this.activeName}`] as any).init(obj);
          }
        } else if(type === "retry") {
          let retryfailed: any = false;
          for(let retryValue of obj.data) {
            if(retryValue.status !== "failed") {
              retryfailed = true;
            }
          }
          if(retryfailed) {
            (this as any).$message({
              message: this.$t('order.retryError').toString(),
              type: "warning",
            });
          } else {
            (this.$refs[`retryDialog-${this.activeName}`] as any).init(obj);
          }
        }
      }
    },

    // 修改带宽
    editBandwidth(
      data: any,
      orderType: "desktopInstance" | "bandwidthInstance"
    ) {
      let obj: any = {};
      obj.data = data;
      obj.orderType = orderType;
      (this.$refs["editBandwidth"] as any).init(obj);
    },

    // 修改实例状态
    changeOrderStatus(
      data: any,
      orderType: "desktopInstance" | "bandwidthInstance"
    ) {
      (this as any).$refs[`ChangeOrderStatus-${this.activeName}`].init({
        data: data,
        orderType: orderType,
      });
    },

    // 变更桌面
    changeDesktop(
      data: any,
      orderType: "desktopInstance" | "bandwidthInstance"
    ) {
      (this as any).$refs[`ChangeDesktop-${this.activeName}`].init({
        data: data,
        orderType: orderType,
      });
    },

    // 切换tab
    tabshandleClick(tab: any, event: any) {
      this.activeName = tab.name;
      this.searchValue = "";
      this.isOperationStatus = "";
      localStorage.setItem("horizonOrderActiveName", tab.name);
      (this.$refs[`horizionOrder-${tab.name}`] as any).refresh();
    },

    // 修改确认失败条件
    getConfirmFailedStatus(row: any) {
      let status = false;
      if (
        row.requestType === "createDesktops" ||
        row.requestType === "createBandwidth"
      ) {
        if (
          row.status === "confirm failed" ||
          row.status === "failed"
        ) {
          if (
            row.step === "checkWorkareaArg" ||
            row.step === "createDesktops" ||
            row.step === "createBandwidth"
          ) {
            status = false;
          } else {
            status = true;
          }
        } else {
          status = true;
        }
      } else {
        status = true;
      }
      return status;
    },
    BatchConfirm(data: any) {
      let batchConfirmError = false;
      const errMsgArr = [];
      for(let errormessage of data.rows) {
        if((errormessage as any).code !== 200) {
          batchConfirmError = true;
        }
        errormessage.code != 200 && errMsgArr.push(errormessage);
      }
      if(batchConfirmError) {
        (this.$refs[`orderErrorMessage-${this.activeName}`] as any).init(errMsgArr);
      } else {
        (this.$refs[`retryDialog-${this.activeName}`] as any).init(errMsgArr);
      }
    }
  },
});
</script>
<style lang="scss" scoped>
.page-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #eff1f4;

  .page-header {
    height: 60px;
    background-color: #ffffff;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #d9d9d9;

    .page-tile {
      color: #031129;
      font-size: 16px;
      margin-left: 20px;

      .iconzhongyiicon_gaojing {
        margin-left: 5px;
      }
    }
  }

  .page-content {
    height: calc(100vh - 110px);
    overflow: hidden;
    flex-grow: 1;

    .content-wrapper {
      padding: 15px;
    }
  }
}

.table-left-options {
  display: flex;
}

.table-right-options {
  display: flex;

  .setting-button {
    margin-right: 10px;
  }
}

.delete-warning-icon {
  color: #ff931d;
  font-size: 20px;
  margin-right: 10px;

  &::before {
    font-size: 20px;
  }
}
</style>
